<template>
  <div class="p-30">
    <!-- 需要签到的活动列表 -->
    <el-table
        :data="activities"
        border
        style="width: 100%">
      <el-table-column
          prop="title"
          label="活动"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          prop="join_num"
          label="参与人数"
          width="80">
      </el-table-column>
      <el-table-column
          prop="signin_num"
          label="签到人数"
          width="80">
      </el-table-column>
      <el-table-column
          label="未签到人数"
          width="100">
        <template v-slot="{row}">
          {{ row.join_num - row.signin_num }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
      >
        <template v-slot="{row}">
          <el-button type="primary" icon="el-icon-view" @click="getActivitySigninList(row.id)">查看签到信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 需要签到的活动列表 end-->
    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="text-center mt-20"
        v-show="total>10"
        :page-size="limit"
        :current-page.sync="pageNo"
    ></el-pagination>
    <!-- 分页器 end-->
    <!-- 查看签到信息的对话框 -->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
    >
      <template>
        <div v-show="signinList.length<1">
          暂无签到信息
        </div>
        <div v-for="item in signinList" :key="item.id" class="space-x-10">
          <span>姓名：{{ item.name }}</span>
          <span>学号：{{ item.stu_code }}</span>
          <span>签到时间：{{ $dayjs(item.signin_time * 1).format('YYYY/MM/DD hh:mm:ss') }}</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看签到信息的对话框 end -->
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ActivitySignin",
  data() {
    return {
      pageNo: 1,
      limit: 10,
      dialogVisible: false // 控制查看签到信息的对话框开关
    }
  },
  mounted() {
    this.getNeedSigninActivities()
  },
  computed: {
    ...mapState('activity', ['activities', 'total', 'signinList'])
  },
  methods: {
    // 获取需要签到的活动信息
    getNeedSigninActivities() {
      let {pageNo, limit} = this;
      this.$store.dispatch('activity/getNeedSigninActivities', {
        society_id: this.$store.getters.society_id,
        pageNo, limit
      })
    },
    // 获取该活动已签到人的信息
    async getActivitySigninList(activity_id) {
      await this.$store.dispatch('activity/getActivitySigninList', activity_id);
      this.dialogVisible = true;
    }
  },
  watch: {
    pageNo() {
      this.getNeedSigninActivities();
    },
  }
}
</script>

<style scoped>

</style>